<template>
  <div class="store-detail">
    <h1>Store Details</h1>
    <div v-if="loading">Loading...</div>
    <div v-else-if="error">{{ error }}</div>
    <div v-else class="store-container">
      <h2>{{ store.name }}</h2>
      <p>{{ store.description }}</p>
      <div class="store-info">
        <p><strong>Address:</strong> {{ store.address }}</p>
        <p><strong>Phone:</strong> {{ store.phone }}</p>
        <p><strong>Hours:</strong> {{ store.hours }}</p>
      </div>
      <div class="pets-section" v-if="store.pets && store.pets.length">
        <h3>Available Pets</h3>
        <div class="pets-grid">
          <div v-for="pet in store.pets" :key="pet.id" class="pet-card">
            <img :src="pet.image" :alt="pet.name" class="pet-image">
            <h4>{{ pet.name }}</h4>
            <p>{{ pet.breed }}</p>
            <p>${{ pet.price }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import api from '@/network/api'

export default defineComponent({
  name: 'StoreDetailView',
  setup() {
    const route = useRoute()
    const storeId = parseInt(route.params.id as string)
    const store = ref<any>({})
    const loading = ref(true)
    const error = ref('')

    onMounted(async () => {
      try {
        loading.value = true
        // Assuming you have this API method implemented
        const response = await api.getStoreDetail(storeId)
        store.value = response.data
      } catch (err) {
        error.value = 'Failed to load store details'
        console.error(err)
      } finally {
        loading.value = false
      }
    })

    return {
      store,
      loading,
      error
    }
  }
})
</script>

<style scoped>
.store-detail {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.store-container {
  margin-top: 20px;
}

.store-info {
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 8px;
  margin: 20px 0;
}

.pets-section {
  margin-top: 30px;
}

.pets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.pet-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  transition: transform 0.3s ease;
}

.pet-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.pet-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 4px;
}
</style> 